<template>
	<view style="white-space: break-spaces;">{{text}}</view>
</template>

<script setup>
import { ref, onMounted, defineProps, watch } from "vue"
const props = defineProps({
	options: {
		type: Array
	},
	value: {
		type: [String, Number]
	}
})
const text = ref('')

watch(() => props.value, (val) => {
    if (props.options.length&&props.value) {
    	props.options.forEach(item=>{
    		if (item.value == props.value) {
    			text.value = item.text
    		}
    	})
    } else {
    	text.value = '--'
    }
});
onMounted(()=>{
	if (props.options.length&&props.value) {
		props.options.forEach(item=>{
			if (item.value == props.value) {
				text.value = item.text
			}
		})
	} else {
		text.value = '--'
	}
})
</script>

<style lang="scss" scoped>
	
</style>